<template>
  <div class="cloud" @click="$refs.header.tabShow = false">
    <header-tab ref="header"/>
    <div class="sw-cloud-content" id="sw-cloud-content">
      <div class="could-data">
        <div class="could-data-top"
             style="background-image: url(https://tianpeng.zbjimg.com/tianpeng/task/云服务PC1.28_02.jpg/origine/be2f5466-0b8c-4fca-8a87-4585c693cc10)">
          <div class="could-data-top-main">
            <div class="could-data-top-title">
              <span class="title">老衲软件云服务</span>
              <span class="discount j-swCloudOrder">推广期限时钜惠  低至
                  <span class="discount-num">7.2折</span>
              </span>
            </div>
            <div class="could-data-top-subtitle">通过老衲软件优惠充值阿里、华为等各类主流云服务，满足您的不同需求</div>
            <div class="could-data-top-input" @click="isShowForm = true">
              <input type="text" placeholder="请输入您想要咨询的问题" readonly class="input-title" name="input-title">
              <input type="button" value="优惠咨询" class="input-button j-swCloudOrder" data-linkid="sw-cloud-top-order">
            </div>
            <div class="could-data-top-advance">

              <div class="advance-item">
                <img
                  src="https://tianpeng.zbjimg.com/tianpeng/task/icon-1.png/origine/3c77bb7e-d7fa-4386-84c9-cf99fde71622"
                  alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">云服务器</div>
                  <div class="subtitle">弹性可伸缩的计算服务，降本增效</div>
                </div>
              </div>

              <div class="advance-item">
                <img
                  src="https://tianpeng.zbjimg.com/tianpeng/task/icon-2.png/origine/25b51bc8-e92a-41b6-973b-e9db7d99ce3c"
                  alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">云数据库</div>
                  <div class="subtitle">全球最受欢迎的开源数据库之一</div>
                </div>
              </div>

              <div class="advance-item">
                <img
                  src="https://tianpeng.zbjimg.com/tianpeng/task/icon-3.png/origine/02f24d61-baa6-40cb-be2c-012ac8187fc1"
                  alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">存储服务</div>
                  <div class="subtitle">吞吐TB/s IOPS亿级，稳定、安全、高性能</div>
                </div>
              </div>

              <div class="advance-item">
                <img
                  src="https://tianpeng.zbjimg.com/tianpeng/task/icon-4.png/origine/445dc4e6-2f63-49f6-9449-3474856ea744"
                  alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">云通讯</div>
                  <div class="subtitle">验证码和短信通知服务，三网合一快速到达</div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="cloud-data-advantage">
          <div class="advantage-title">老衲软件携手阿里云提供领先的云计算服务</div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/1.jpg/origine/84ac9125-d262-415a-a6b9-fd41072d7c09"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">安全稳定、数据可靠</div>
              <div class="subtitle">实例可用性达高，云盘采用可靠性设计，自动宕机迁移，自动快照备份，数据恢复更方便</div>
            </div>
          </div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/2.jpg/origine/6f5cb379-af63-4054-b812-7bd6cab5bc60"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">性能卓越，弹性伸缩</div>
              <div class="subtitle">云服务器CPU、内存、磁盘等资，实例与带宽均可随时升降配，按需弹性升级扩展能力</div>
            </div>
          </div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/3.jpg/origine/d7688233-ac14-46cd-b4bf-6b41e807753e"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">节约成本、简单易用</div>
              <div class="subtitle">支持多种主流操作系统，按需取用，按需付费，无需购买大量设备，相比传统主机投入成本降低30%-80%</div>
            </div>
          </div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/4.jpg/origine/5e4bb096-83b9-4c62-818d-2c4891996522"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">可拓展性强</div>
              <div class="subtitle">ECS 可与阿里云各种丰富的云产品无缝衔接可持续为业务发展提供完整的计算、存储、安全等解决方案</div>
            </div>
          </div>

        </div>
        <div class="cloud-data-case">
          <div class="cloud-data-case-main">
            <div class="case-title">合作伙伴</div>
            <div class="item-main">

              <div class="case-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/3.png/origine/70422e90-0575-4676-b05e-45fb18eabda1"
                     alt="" class="item-icon">
              </div>

              <div class="case-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/2.png/origine/9da53c5e-0c0d-4c79-b68f-71f8b64cbf7d"
                     alt="" class="item-icon">
              </div>

            </div>
          </div>
        </div>
        <div class="cloud-data-meal"
             style="background-image: url(https://tianpeng.zbjimg.com/tianpeng/task/云服务PC1.28_04.jpg/origine/ba11e279-85f6-4b79-807d-7c0927e0937b)">
          <div class="cloud-data-meal-main">
            <div class="meal-title">现在咨询，可享推广期专属优惠政策</div>
            <div class="meal-subtitle">老衲软件云服务，助力企业打造全面贴合业务需求的云上业务</div>
            <div class="meal-btn j-swCloudOrder" data-linkid="sw-cloud-bottom-order" @click="isShowForm = true">立即咨询
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="m-sw-cloud-content" id="m-sw-cloud-content">
      <div class="m-could-data">
        <div class="could-data-top"
             style="background-image: url(https://tianpeng.zbjimg.com/tianpeng/task/1.28云服务h5_02.jpg/origine/07d5c9d8-d738-4edc-a14f-9860dcda859b)">
          <div class="could-data-top-main">
            <div class="could-data-top-title">
              <span class="title">老衲软件云服务</span>
            </div>
            <div class="could-data-top-discount j-swMCloudOrder">推广期限时钜惠 低至
              <span class="discount-num">7.2折</span>
            </div>
            <div class="could-data-top-subtitle">通过老衲软件优惠充值阿里、华为等各类主流云服务，满足您的不同需求</div>
            <div class="could-data-top-input j-swMCloudOrder" @click="isShowForm = true">
              优惠咨询
            </div>
            <div class="could-data-top-advance">

              <div class="advance-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/1.png/origine/b235b86f-beb8-4fa8-b9e7-32b68db84156"
                     alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">云服务器</div>
                </div>
              </div>

              <div class="advance-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/2.png/origine/7fd75d63-e176-4521-9149-0438958fdaa8"
                     alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">云数据库</div>
                </div>
              </div>

              <div class="advance-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/3.png/origine/1221283d-c4a5-4e4f-9837-65603553d315"
                     alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">存储服务</div>
                </div>
              </div>

              <div class="advance-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/4.png/origine/e7946a4a-6461-4dd5-912e-eb16ab537ee1"
                     alt="" class="item-icon">
                <div class="item-message">
                  <div class="title">云通讯</div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="cloud-data-advantage">
          <div class="advantage-title">老衲软件携手阿里云提供领先的云计算服务</div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/1.jpg/origine/815dff54-f835-45ff-977f-9494382e3110"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">安全稳定、数据可靠</div>
              <div class="subtitle">实例可用性达高，云盘采用可靠性设计，自动宕机迁移，自动快照备份，数据恢复更方便</div>
            </div>
          </div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/2.jpg/origine/9694ab20-09e0-4347-a437-c3be3a051a3a"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">性能卓越，弹性伸缩</div>
              <div class="subtitle">云服务器CPU、内存、磁盘等资，实例与带宽均可随时升降配，按需弹性升级扩展能力</div>
            </div>
          </div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/3.jpg/origine/8718e011-6fa2-4999-8f5d-6bdf4dfe3335"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">节约成本、简单易用</div>
              <div class="subtitle">支持多种主流操作系统，按需取用，按需付费，无需购买大量设备，相比传统主机投入成本降低30%-80%</div>
            </div>
          </div>

          <div class="advantage-item">
            <img src="https://tianpeng.zbjimg.com/tianpeng/task/4.jpg/origine/80a3ef35-85ab-4aa2-ab66-d9f0998234b4"
                 alt="" class="item-icon">
            <div class="item-message">
              <div class="title">可拓展性强</div>
              <div class="subtitle">ECS 可与阿里云各种丰富的云产品无缝衔接可持续为业务发展提供完整的计算、存储、安全等解决方案</div>
            </div>
          </div>

        </div>
        <div class="cloud-data-case">
          <div class="cloud-data-case-main">
            <div class="case-title">合作伙伴</div>
            <div class="item-list">

              <div class="case-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/3.png/origine/f8aaa69f-8303-4065-99e4-e6cab8a7d505"
                     alt="" class="item-icon">
              </div>

              <div class="case-item">
                <img src="https://tianpeng.zbjimg.com/tianpeng/task/2.png/origine/eacc3324-4eb1-4e6b-9257-682cd038824b"
                     alt="" class="item-icon">
              </div>

            </div>
          </div>
        </div>
        <div class="cloud-data-meal"
             style="background-image: url(https://tianpeng.zbjimg.com/tianpeng/task/1.28云服务h5_04.jpg/origine/2d348d64-d10a-41d5-a3ec-f47ad01c7fae)">
          <div class="cloud-data-meal-main">
            <div class="meal-title">现在咨询，可享推广期专属优惠政策</div>
            <div class="meal-subtitle">老衲软件云服务，助力企业打造全面贴合业务需求的云上业务</div>
            <div class="meal-btn j-swMCloudOrder" @click="isShowForm = true">免费咨询</div>
          </div>
        </div>
        <div class="cloud-ghost-box">
          <img
            src="https://tianpeng.zbjimg.com/tianpeng/task/%E9%A1%BE%E9%97%AE%E5%A4%B4%E5%83%8F.png/origine/6f1072de-6c17-4493-8d0f-be6daa89061a"
            alt="" class="ghost-img">
          <span class="ghost-text">老衲官方专家为您提供1V1专属服务</span>
          <span class="ghost-btn j-swMCloudOrder">老衲官方</span>
        </div>
      </div>
    </div>
    <!--    咨询表单-->
    <bottom-form title="免费预约咨询" v-if="isShowForm" @hideForm="isShowForm = false"/>
    <footer-tab/>
  </div>
</template>

<script>
  import HeaderTab from '@/components/headerTab'
  import FooterTab from '@/components/FooterTab'
  import BottomForm from '@/components/bottomForm'

  export default {
    components: {
      HeaderTab, FooterTab, BottomForm
    },
    data() {
      return {
        isShowForm: false
      }
    }

  }
</script>

<style scoped>

</style>
